<template>
  <tbody>
    <tr v-for="(item, index) in goodList" :key="index">
      <td>
        <input type="checkbox" :checked="item.checked"
        @click="onChecked([$event, index])"
        />
      </td>
      <td>{{item.name}}</td>
      <td>{{item.price}}</td>
      <td>
        <button @click="onSubNum(index)">-</button>
        {{item.num}}
        <button @click="onAddNum(index)">+</button>
      </td>
      <td>{{item.price * item.num}}</td>
      <td><button @click="onDel(index)">删除</button></td>
    </tr>
  </tbody>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
// console.log(mapState(['goodList']))
export default {
  data () {
    return {
    }
  },

  computed: {
    ...mapState(['goodList'])
    // onChecked (e) {
    //   const totalPrice = this.goodList[e[1]].price * this.goodList[e[1]].num
    //   return totalPrice
    // }
  },

  created () {

  },

  methods: {
    ...mapMutations(['isChecked', 'addNum', 'subNum', 'del']),
    onChecked (e) {
      // console.log(e[0].target.checked)
      // this.$store.commit('isChecked', e)
      this.isChecked(e)
    },
    onAddNum (index) {
      this.addNum(index)
    },
    onSubNum (index) {
      this.subNum(index)
    },
    onDel (index) {
      this.del(index)
    }
  }
}
</script>

<style scoped lang='less'>

</style>
